<template>
  <div class="rightmenu">
    <scroll class="content" ref="scroll">
      <categorylistc />
      <tabcontrol
        :titles="titles"
        class="categorytab"
        @tabclick="catetabclick"
        ref="tabcontrol"
      />
      <categorygoodslist
        :categorygoodsarr="choseShowArr"
        class="categorygoodslist"
      />
    </scroll>
  </div>
</template>

<script>
import scroll from "@/components/common/better-scroll/scroll";
import tabcontrol from "@/components/content/Tabcontrol/Tabcontrol";
import categorygoodslist from "./Categorygoodlist.vue";
import categorylistc from "./CategoryList";
import { debounce } from "@/common/util";

export default {
  name: "caterightmenu",
  data() {
    return {
      titles: ["流行", "新款", "精选"],
      goodcountstype: ["pop", "new", "sell"],
      crrundindex: 0,
      debouload: null,
    };
  },
  props: {
    categorygoodsarr: Object,
  },
  mounted() {
    this.$bus.$on("leftitemclick", () => {
      this.$refs.scroll.scrollTo(0, 0, 100);
      this.$refs.tabcontrol.currentindex = 0;
      this.crrundindex = 0;
    });
    this.$bus.$on("goodsitemload", () => {
      this.debouload();
     // console.log("下面的图片加载好了");
    });

    this.debouload = debounce(this.$refs.scroll.refresh, 200);
  },
  computed: {
    choseShowArr() {
      return this.categorygoodsarr[this.chosetype];
    },
    chosetype() {
      return this.goodcountstype[this.crrundindex];
    },
  },
  components: {
    categorylistc,
    tabcontrol,
    categorygoodslist,
    scroll,
  },
  methods: {
    catetabclick(index) {
      this.debouload();
      this.crrundindex = index;
      this.$emit("catetabclick", this.goodcountstype[index]);
    },
  },
};
//个人理解
//点击tab，右边向上滚时，是因为下面的图片没有出来，没有高度
</script>

<style scoped>
.rightmenu {
  flex: 1;
}
categorytab {
  margin-bottom: 10px;
}
.categorygoodslist {
  height: 100%;
}
.content {
  height: calc(100vh - 95px);
}
</style>